<template>
    <div class="card process-board">
        <flexbox justify="center" class="card-header">
            <flexbox orient="vertical" align="center">
                <span class="title">进度看板</span>
                <span class="sub-title">Project progress</span>
            </flexbox>
        </flexbox>
        <div class="card-cont">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane v-for="(item, index) of tabList" :key="index" :tab="item.name">
                    <component :is="item.comName" :systemId="systemId" />
                </a-tab-pane>
                <template #tabBarExtraContent>
                    <flexbox>
                        <div style="margin-right: 16px">
                            <span>所属系统：</span>
                            <a-select placeholder="请选择" style="min-width: 200px" v-model:value="systemId" allowClear>
                                <a-select-option v-for="item of dicOptions.mySystem" :key="item.code">
                                    {{ item.system }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <a class="caption-font-color" @click="showMore">更多<RightOutlined class="margin-l-8 caption-font-color" /></a>
                    </flexbox>
                </template>
            </a-tabs>
        </div>
        <img src="@/assets/images/workbench/img_product.png" class="img1" />
        <img src="@/assets/images/workbench/img_2.png" class="img2" />
    </div>
</template>

<script lang="ts">
import { RightOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import TaskBoard from './taskBoard/index.vue';
import VersionBoard from './versionBoard/index.vue';
import store from '@/store';
import { defineComponent, reactive, unref, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'ProductCard',
    components: {
        RightOutlined,
        TaskBoard,
        VersionBoard
    },
    setup() {
        const router = useRouter();
        const state = reactive<any>({
            activeKey: 0,
            systemId: ''
        });
        const tabList = computed(() => {
            if (store.getters.userInfo.roles.includes('产品经理')) {
                return [
                    { name: '受理进度看板', comName: 'TaskBoard' },
                    { name: '研发进度看板', comName: 'VersionBoard' }
                ];
            } else {
                return [{ name: '研发进度看板', comName: 'VersionBoard' }];
            }
        });
        const showMore = () => {
            let path = '/workbench/versionBoard';
            if (unref(tabList).length === 2) {
                path = state.activeKey === 0 ? '/workbench/taskBoard' : '/workbench/versionBoard';
            }
            router.push({
                path
            });
        };
        return {
            ...toRefs(state),
            showMore,
            tabList
        };
    }
});
</script>

<style scoped lang="less">
@import '../../style';
.img1 {
    position: absolute;
    top: 6px;
    left: 24px;
}
.img2 {
    position: absolute;
    top: 0;
    right: 0;
}
</style>